{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 笔记列表{% endblock %}

{% block page_title %}笔记列表{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">笔记列表</li>
{% endblock %}

{% block page_actions %}
<div class="d-flex">
    <a href="{{ url_for('xhs.add_note') }}" class="btn btn-primary me-2">
        <i class="fas fa-plus me-1"></i> 添加笔记
    </a>
    <button class="btn btn-outline-primary me-2" type="button" data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="false" aria-controls="searchCollapse">
        <i class="fas fa-search me-1"></i> 高级搜索
    </button>
    <button class="btn btn-outline-primary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fas fa-file-export me-1"></i> 导出
    </button>
    <ul class="dropdown-menu" aria-labelledby="exportDropdown">
        <li><a class="dropdown-item" href="/notes/export/excel"><i class="fas fa-file-excel me-2 text-success"></i>导出为Excel</a></li>
        <li><a class="dropdown-item" href="/notes/export/csv"><i class="fas fa-file-csv me-2 text-primary"></i>导出为CSV</a></li>
        <li><a class="dropdown-item" href="/notes/export/json"><i class="fas fa-file-code me-2 text-warning"></i>导出为JSON</a></li>
    </ul>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
    .filter-form {
        background-color: #f8f9fa;
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    }
    
    .note-card {
        border-radius: 0.75rem;
        overflow: hidden;
        transition: all 0.3s;
        height: 100%;
    }
    
    .note-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    
    .note-card .card-img-top {
        height: 180px;
        object-fit: cover;
    }
    
    .note-card .card-body {
        padding: 1.25rem;
    }
    
    .note-card .note-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        height: 2.4rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .note-card .note-author {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
    }
    
    .note-card .note-stats {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
        font-size: 0.875rem;
    }
    
    .note-card .note-stat {
        display: flex;
        align-items: center;
    }
    
    .note-card .note-stat i {
        margin-right: 0.25rem;
    }
    
    .note-grid-view .note-card {
        margin-bottom: 1.5rem;
    }
    
    .view-toggle .btn {
        padding: 0.375rem 0.75rem;
    }
    
    .pagination .page-item .page-link {
        border-radius: 0.375rem;
        margin: 0 0.125rem;
        color: var(--primary-color);
    }
    
    .pagination .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }
    
    .table th {
        font-weight: 600;
        color: #8898aa;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.025rem;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .table .actions {
        white-space: nowrap;
    }
    
    .badge-keyword {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.35em 0.65em;
        border-radius: 0.375rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- 高级搜索 -->
<div class="collapse mb-4" id="searchCollapse">
    <div class="filter-form animate__animated animate__fadeIn">
        <form method="get" action="/notes" class="row g-3">
            <div class="col-md-4">
                <label for="keyword-select" class="form-label">关键词</label>
                <select class="form-select" name="keyword" id="keyword-select">
                    <option value="">全部关键词</option>
                    {% for kw in keywords %}
                    <option value="{{ kw }}" {% if search_keyword == kw %}selected{% endif %}>{{ kw }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <label for="author" class="form-label">作者</label>
                <input type="text" class="form-control" id="author" name="author" placeholder="输入作者名称">
            </div>
            <div class="col-md-4">
                <label for="date-range" class="form-label">采集日期</label>
                <input type="text" class="form-control" id="date-range" name="date_range" placeholder="选择日期范围">
            </div>
            <div class="col-md-4">
                <label for="min-likes" class="form-label">最小点赞数</label>
                <input type="number" class="form-control" id="min-likes" name="min_likes" placeholder="最小点赞数">
            </div>
            <div class="col-md-4">
                <label for="min-collects" class="form-label">最小收藏数</label>
                <input type="number" class="form-control" id="min-collects" name="min_collects" placeholder="最小收藏数">
            </div>
            <div class="col-md-4">
                <label for="min-comments" class="form-label">最小评论数</label>
                <input type="number" class="form-control" id="min-comments" name="min_comments" placeholder="最小评论数">
            </div>
            <div class="col-12 d-flex justify-content-end">
                <button type="reset" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-undo me-1"></i> 重置
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-1"></i> 搜索
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card mb-4 animate__animated animate__fadeIn">
    <div class="card-body">
        <!-- 搜索结果提示 -->
        {% if search_keyword %}
        <div class="alert alert-info d-flex justify-content-between align-items-center mb-4 animate__animated animate__fadeIn">
            <div>
                <i class="fas fa-filter me-2"></i> 当前筛选: <strong>{{ search_keyword }}</strong>
            </div>
            <a href="/notes" class="btn btn-sm btn-outline-info">
                <i class="fas fa-times me-1"></i> 清除筛选
            </a>
        </div>
        {% endif %}
        
        <!-- 视图切换和筛选 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="view-toggle">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary active" id="list-view-btn">
                        <i class="fas fa-list me-1"></i> 列表视图
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="grid-view-btn">
                        <i class="fas fa-th-large me-1"></i> 网格视图
                    </button>
                </div>
            </div>
            <div class="d-flex align-items-center">
                <span class="me-2 text-muted">排序:</span>
                <select class="form-select form-select-sm" style="width: auto;">
                    <option value="collect_time_desc">采集时间 (最新)</option>
                    <option value="collect_time_asc">采集时间 (最早)</option>
                    <option value="likes_desc">点赞数 (高到低)</option>
                    <option value="likes_asc">点赞数 (低到高)</option>
                    <option value="collects_desc">收藏数 (高到低)</option>
                    <option value="comments_desc">评论数 (高到低)</option>
                </select>
            </div>
        </div>
        
        <!-- 列表视图 -->
        <div id="list-view">
            {% if notes %}
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width: 5%">ID</th>
                            <th style="width: 28%">标题</th>
                            <th style="width: 15%">作者</th>
                            <th style="width: 10%">关键词</th>
                            <th style="width: 10%">点赞</th>
                            <th style="width: 10%">收藏</th>
                            <th style="width: 12%">采集时间</th>
                            <th style="width: 10%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for note in notes %}
                        <tr>
                            <td>{{ note.id }}</td>
                            <td>
                                <a href="/notes/{{ note.id }}" class="text-dark fw-500 d-block text-truncate" style="max-width: 250px;">
                                    {{ note.title }}
                                </a>
                            </td>
                            <td>{{ note.author }}</td>
                            <td>
                                {% if note.keyword %}
                                <a href="/notes?keyword={{ note.keyword }}" class="badge bg-primary badge-keyword">
                                    {{ note.keyword }}
                                </a>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                <span data-bs-toggle="tooltip" title="点赞数">
                                    <i class="fas fa-heart text-danger me-1"></i>{{ note.likes|default(0) }}
                                </span>
                            </td>
                            <td>
                                <span data-bs-toggle="tooltip" title="收藏数">
                                    <i class="fas fa-bookmark text-primary me-1"></i>{{ note.collects|default(0) }}
                                </span>
                            </td>
                            <td>{{ note.collect_time }}</td>
                            <td class="actions">
                                <div class="btn-group btn-group-sm">
                                    <a href="/notes/{{ note.id }}" class="btn btn-outline-info" title="查看详情" data-bs-toggle="tooltip">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="/notes/{{ note.id }}/edit" class="btn btn-outline-primary" title="编辑" data-bs-toggle="tooltip">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-danger" title="删除" data-bs-toggle="tooltip"
                                            onclick="confirmDelete('{{ note.id }}', '{{ note.title }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5">
                <div class="mb-3">
                    <i class="fas fa-file-alt fa-3x text-muted"></i>
                </div>
                <h5 class="text-muted">暂无笔记数据</h5>
                <p class="text-muted">您可以添加新笔记或启动采集任务获取数据</p>
                <div class="mt-3">
                    <a href="{{ url_for('xhs.add_note') }}" class="btn btn-primary me-2">
                        <i class="fas fa-plus me-1"></i> 添加笔记
                    </a>
                    <a href="/tasks/add" class="btn btn-outline-primary">
                        <i class="fas fa-tasks me-1"></i> 创建采集任务
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- 网格视图 -->
        <div id="grid-view" class="note-grid-view" style="display: none;">
            {% if notes %}
            <div class="row">
                {% for note in notes %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="card note-card">
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center">
                            {% if note.cover_url %}
                            <img src="{{ note.cover_url }}" alt="{{ note.title }}" class="img-fluid">
                            {% else %}
                            <div class="text-center py-5">
                                <i class="fas fa-image fa-3x text-muted"></i>
                                <p class="text-muted mt-2">无封面图</p>
                            </div>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <h5 class="note-title">
                                <a href="/notes/{{ note.id }}" class="text-dark">{{ note.title }}</a>
                            </h5>
                            <div class="note-author">
                                <i class="fas fa-user me-1"></i> {{ note.author }}
                            </div>
                            {% if note.keyword %}
                            <a href="/notes?keyword={{ note.keyword }}" class="badge bg-primary badge-keyword">
                                {{ note.keyword }}
                            </a>
                            {% endif %}
                            <div class="note-stats">
                                <div class="note-stat">
                                    <i class="fas fa-heart text-danger"></i> {{ note.likes|default(0) }}
                                </div>
                                <div class="note-stat">
                                    <i class="fas fa-bookmark text-primary"></i> {{ note.collects|default(0) }}
                                </div>
                                <div class="note-stat">
                                    <i class="fas fa-comment text-success"></i> {{ note.comments_count|default(0) }}
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white d-flex justify-content-between">
                            <small class="text-muted">{{ note.collect_time }}</small>
                            <div class="btn-group btn-group-sm">
                                <a href="/notes/{{ note.id }}" class="btn btn-outline-info" title="查看详情" data-bs-toggle="tooltip">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="/notes/{{ note.id }}/edit" class="btn btn-outline-primary" title="编辑" data-bs-toggle="tooltip">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-5">
                <div class="mb-3">
                    <i class="fas fa-file-alt fa-3x text-muted"></i>
                </div>
                <h5 class="text-muted">暂无笔记数据</h5>
                <p class="text-muted">您可以添加新笔记或启动采集任务获取数据</p>
                <div class="mt-3">
                    <a href="{{ url_for('xhs.add_note') }}" class="btn btn-primary me-2">
                        <i class="fas fa-plus me-1"></i> 添加笔记
                    </a>
                    <a href="/tasks/add" class="btn btn-outline-primary">
                        <i class="fas fa-tasks me-1"></i> 创建采集任务
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- 分页 -->
        {% if notes and total_pages > 1 %}
        <nav aria-label="笔记列表分页" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
                    <a class="page-link" href="/notes?page={{ current_page - 1 }}{% if search_keyword %}&keyword={{ search_keyword }}{% endif %}" aria-label="上一页">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </li>
                {% for page in range(1, total_pages + 1) %}
                <li class="page-item {% if page == current_page %}active{% endif %}">
                    <a class="page-link" href="/notes?page={{ page }}{% if search_keyword %}&keyword={{ search_keyword }}{% endif %}">{{ page }}</a>
                </li>
                {% endfor %}
                <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
                    <a class="page-link" href="/notes?page={{ current_page + 1 }}{% if search_keyword %}&keyword={{ search_keyword }}{% endif %}" aria-label="下一页">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除笔记 "<span id="deleteNoteTitle"></span>" 吗？</p>
                <p class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i> 此操作不可撤销，相关评论数据也将被删除。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form id="deleteForm" method="post" action="">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i> 确认删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化工具提示
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // 视图切换功能
        const listViewBtn = document.getElementById('list-view-btn');
        const gridViewBtn = document.getElementById('grid-view-btn');
        const listView = document.getElementById('list-view');
        const gridView = document.getElementById('grid-view');
        
        listViewBtn.addEventListener('click', function() {
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
            listView.style.display = 'block';
            gridView.style.display = 'none';
            // 保存用户偏好
            localStorage.setItem('notes_view_mode', 'list');
        });
        
        gridViewBtn.addEventListener('click', function() {
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
            gridView.style.display = 'block';
            listView.style.display = 'none';
            // 保存用户偏好
            localStorage.setItem('notes_view_mode', 'grid');
        });
        
        // 加载用户偏好的视图模式
        const savedViewMode = localStorage.getItem('notes_view_mode');
        if (savedViewMode === 'grid') {
            gridViewBtn.click();
        }
        
        // 关键词筛选改变时自动提交表单
        document.getElementById('keyword-select').addEventListener('change', function() {
            this.closest('form').submit();
        });
    });
    
    // 删除确认
    function confirmDelete(noteId, noteTitle) {
        document.getElementById('deleteNoteTitle').textContent = noteTitle;
        document.getElementById('deleteForm').setAttribute('action', '/notes/' + noteId + '/delete');
        
        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        deleteModal.show();
    }
</script>
{% endblock %} 